<template>
    <el-upload
    class="avatar-uploader zfx"
    :action="getbaseUrl"
     name="file"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>

<script setup>
import {onMounted, onUnmounted, onUpdated, ref,watch, watchEffect} from "vue"
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {baseUrl} from "@/utils/util"
// import { staffData } from "@/stores/staff.js"
import {userManage} from "@/stores/user.js"

// let mStaff = staffData()
let usermanage =  userManage()
let emit = defineEmits(["getImgurl"])

const imageUrl = ref('')

// 图片上传请求api
let getbaseUrl = baseUrl()+"/photo/upload"
let apiImg = baseUrl()

let handleAvatarSuccess = (response,uploadFile)=>{
    // console.log(response,uploadFile,"这是什么数据")
    imageUrl.value = apiImg+response.data
    // console.log(imageUrl.value,"这是图片的地址")
    emit("getImgurl",response.data)
}

const beforeAvatarUpload = (rawFile) => {
//   if (rawFile.type !== 'image/jpeg') {
//     ElMessage.error('Avatar picture must be JPG format!')
//     return false
//   } else if (rawFile.size / 1024 / 1024 > 2) {
//     ElMessage.error('Avatar picture size can not exceed 2MB!')
//     return false
//   }
//   return true
}

watch(()=>usermanage.imgUrl,(e)=>{
  // console.log(e,"这是什么东西  -------------没有改变吗")
  imageUrl.value = e?apiImg+e:""

  // console.log(imageUrl.value,"imageUrl.value")
},{deep:true})


onMounted(()=>{
  if(usermanage.imgUrl){
    imageUrl.value =apiImg +usermanage.imgUrl
  }
 
  // console.log("挂载")
})

onUnmounted(()=>{
  imageUrl.value =""
  usermanage.imgUrl = ""
  // console.log("卸载")
})

//父亲给儿子传值
let clearImg = (data)=>{
    imageUrl.value = ""
}

defineExpose({
    clearImg
})

</script>

<style lang="scss" scoped>
.bor{
  border-radius: 50%;
}
.zfx{
  border-radius: 100%;
}
.avatar-uploader  {
  border: 1px dashed var(--el-color-primary);
  border-radius: 6px;
  cursor: pointer;
  width: 180px;
  height: 180px;
  position: relative;
  overflow: hidden;

//   transition: var(--el-transition-duration-fast);
.avatar{
    width: 180px;
    height: 180px;
    object-fit: cover;
}
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>